<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Five</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
<a href="/" >返回首页</a>
<div id="app">
    key值: <input type="text" v-model="key">
    value值: <input type="text" v-model="value">
    <button @click.prevent="add">添加key</button>
    <textarea v-model="token"> </textarea><br/><br/>
    <button @click.prevent="parseTokenField()">解析token</button>
    用于解析的key值: <input type="text" v-model="parseKey">
    用于解析的token值: <textarea v-model="parseToken"> </textarea>
    解析后的value值: <input type="text" v-model="parsevalue" disabled>
</div>

</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            value: '',
            key: '',
            token: '',
            parseKey: '',
            parseToken: '',
            parsevalue: ''
        },
        methods: {
            add() {
                let data = {
                    value: this.value,
                    key: this.key
                };
                $.post("/jwt/add", data, data => {
                    alert(data);
                    this.token = data;
                })
            },
            parseTokenField() {
                let data = {
                    key: this.parseKey,
                    token: this.parseToken
                };
                $.post("/jwt/parse", data, data => {
                    alert(data);
                    this.parsevalue = data;
                })
            }
        },
        created() {

        }
    })
</script>
</html>